<template>
  <div class="classList_container">
    <van-list v-model="loading" :finished="finished" finished-text="暂无更多数据" @load="onLoad">
      <ul class="classlist">
        <li :key="index" v-for="(item,index) in couseList" @click="toDetails(item)">
          <img :src="item.courseImg" alt="">
          <div class="info">
              <h2>
                {{item.courseName}}
              </h2>
              <p class="name"></p>
              <span>点击查看</span>
          </div>
        </li>
      </ul>
    </van-list>
  </div>
</template>
<script>
import path from '@/network'
export default {
  name: 'App',
  data () {
    return {
      total: 0,
      pagesize: 10,
      currentPage: 1,
      couseList: [],

      loading: false,
      finished: false,
    };
  },

  created () {
  },
  beforeDestroy () {
  },

  mounted () {
    this.getCourseList();
  },
  methods: {
    getCourseList () {
      path.getCourseList(
        this.currentPage,
        this.pagesize,
      ).then(res => {
        if (res.success === 0) {
          this.dataTotal = res.total
          if (this.dataTotal <= this.pagesize) {
            this.couseList = res.rows
          } else {
            this.currentPage++
            let arr = res.rows
            this.couseList = this.couseList.concat(arr)
          }

          this.loading = false
          if (this.couseList.length >= this.dataTotal) {
            this.finished = true //结束 
          }

        }

      })
    },

    toDetails: function (item) {
      this.$router.push({ name: 'classDetails', query: { id: item.id, title:'课堂详情'} })
    },

    onLoad () {
      this.getCourseList();
    }

  }

}
</script>